<template>
  <div class="popup" :class="typeClass" v-show="isVisible">
    <div class="popup-mask" v-show="mask" @click="maskClick">
      <slot name="mask"></slot>
    </div>
    <div class="popup-container" :class="{'popup-center': center}">
      <div class="popup-content" v-if="$slots.default">
        <slot></slot>
      </div>
      <div class="popup-content" v-else v-html="content">
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Emit, Prop, Mixins } from 'vue-property-decorator'
import ApiMixin from '../common/mixins/api'
const COMPONENT_NAME = 'popup'
const EVENT_MASK_CLICK = 'mask-click'

  @Component({
    name: COMPONENT_NAME
  })
export default class Popup extends Mixins(ApiMixin) {
  @Prop({ default: '' }) private type!:string
  @Prop({ default: '' }) private content!:string
  @Prop({ default: true }) private mask!:boolean
  @Prop({ default: true }) private center!:boolean

  private get typeClass () {
    return this.type
  }
  @Emit(EVENT_MASK_CLICK)
  maskClick (e:Event) {
    return e
  }
}
</script>

<style lang="stylus">
  .popup {
    position: fixed;
    left: 0;
    right:0;
    top: 0;
    bottom: 0;
    z-index: 100;
    user-select: none;
  }
  .popup-mask, .popup-container {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  .popup-mask {
    background-color: rgba(37, 38, 45, .4);
  }
  .popup-container {
    transform: translate(100%, 100%);
  }
  .popup-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    transform: translate(-100%, -100%);
  }
  .popup-center {
    .popup-content {
      position: absolute;
      top: -50%;
      left: -50%;
      width: auto;
      transform: translate(-50%, -50%);
    }
  }
</style>
